<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="nav">
			<view class="nav_left">
				<image src="@/static/gengDuo.png" @click="show = true"></image>
			</view>
			<view class="nav_center"></view>
			<view class="nav_right">
				<image src="@/static/sear.png" @tap="gotosear"></image>
			</view>
		</view>
		<!-- 用户信息 -->
		<view class="user" @click="next">
			<view>
				<view class="d-flex align-items-center">
					<u-image :src="user.avatarUrl" :lazy-load="true" width="100rpx" height="100rpx" shape="circle"
						:fade="true" duration="450">
						<!-- 加载中 -->
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
				<view class="user-msg">
					<text>{{user.nickname}}</text>
					<view class="User-Grade">
						Lv.8
					</view>
				</view>

			</view>
			<view class="user-right">
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</view>
		<!-- 音乐应用 -->
		<view class="function">
			<view class="function-img" v-for="(item,index) in myapp" :key="item.id">
				<image :src="item.src" mode=""></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 我喜欢的音乐  -->
		<view class="LikeMusic">
			<text>歌单({{songlist.length}})</text>
			<view class="list" @tap="send(item.id)" v-for="(item,index) in songlist" :key="item.id">
				<view>
					<image :src="item.coverImgUrl" mode=""></image>
				</view>
				<view class="list-right">
					<text>{{item.name}}</text>
					<view>
						<text>{{item.trackCount}}首，</text>
						<text>by,{{item.creator.nickname}},</text>
						<text>播放{{item.playCount | count}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { UserPlaylist } from  "@/network/user.js"
	export default {
		components: {},
		data() {
			return {
				user: [],
				show: false,
				myapp: [{
						src: "/static/icons/apply-local.png",
						title: "本地/下载"
					},
					{
						src: "/static/icons/apply-bought.png",
						title: "已购"
					},
					{
						src: "/static/icons/apply-lately.png",
						title: "最近播放"
					},
					{
						src: "/static/icons/apply-friend.png",
						title: "我的好友"
					},
					{
						src: "/static/icons/apply-Collection.png",
						title: "收藏和赞"
					},
					{
						src: "/static/icons/apply-podcast.png",
						title: "我的播客"
					},
					{
						src: "/static/icons/apply-broadcast.png",
						title: "我的直播"
					},
					{
						src: "/static/icons/apply-Clouddisk.png",
						title: "助眠解压"
					},
				], //每日推荐数据
				songlist: [],
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('userData');
		},
		methods: {
			// 搜索
			gotosear() {
				uni.navigateTo({
					url: '/subpag/search/search'
				})
			},
			clickLeft() {
				this.$refs.drawer.open()
			},
			//右箭头
			next() {
				uni.navigateTo({
					url: '/subpag/userMessage/userMessage'
				})
			},
			getUserMessage() {
				UserPlaylist(this.userMessage.userId).then(res => {
					if (res.code !== 200) return this.showToast('请求失败', 'none')
					this.songlist = res.playlist;
				})
			},
			//跳到最近播放
			gotonear() {
				uni.navigateTo({
					url: '/subpag/near/near?id=' + this.user.userId
				})
			},
		},
		created() {
			
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #e5e5e5;

	}

	// 顶部导航
	.nav {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;

		// space-between: ;
		view {
			display: flex;
			justify-content: space-around;
			flex: 1;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.nav_left {
			justify-content: flex-start;
		}

		.nav_right {
			justify-content: flex-end;
		}
	}

	// 状态栏占用
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	// 用户信息
	.user {
		padding: 20rpx 30rpx 30rpx 30rpx;
		width: 100%;
		display: flex;

		>view {
			padding: 0 30rpx;
			display: flex;
			border-radius: 10px;
			align-items: center;
			flex: 1;

			.user-msg {
				margin-left: 20rpx;

				.User-Grade {
					margin-top: 10rpx;
					padding-top: 2rpx;
					border-radius: 20rpx;
					width: 80rpx;
					height: 40rpx;
					background-color: #fff;
					font-size: 1px;
					text-align: center;

				}
			}


		}

		.user-right {
			justify-content: flex-end;
			// border: 1px solid red;
		}
	}

	// 音乐应用
	.function {
		width: 90%;
		display: flex;
		margin: 0 auto;
		background-color: #fff;
		flex-wrap: wrap;
		border-radius: 10px;
		padding-bottom: 50rpx;
		padding-top: 30rpx;

		text {
			text-align: center;
		}

		image {
			width: 65rpx;
			height: 65rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			padding-bottom: 10rpx;
		}

		.function-img {
			padding: 20rpx 20rpx;
			margin: 0 auto;
		}

	}

	// 喜欢的音乐
	.LikeMusic {
		width: 90%;
		display: flex;
		background-color: #FFFDEF;
		margin: 25rpx auto;
	}
</style>
